<template>
  <!-- 搜索 -->
  <ContentWrap :style="`height: ${contentHeight}px;`">
    <div class="btn routeHeader">
      <el-button
        type="primary"
        @click="handleExport"
        :loading="exportLoading"
        v-hasPermi="['config:material-history:export']"
      >
        数据导出
      </el-button>
      <el-button
        @click="goBack"
      >
        关闭
      </el-button>
    </div>
    <el-scrollbar :max-height="`${contentHeight - 73}px`">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        :inline="true"
        label-width="110px"
        v-loading="formLoading"
      >
        <el-form-item label="产品编号" prop="productNumber">
          <el-input v-model="formData.productNumber" disabled placeholder="请输入产品编号" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="formData.productName" disabled placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="产品图号" prop="drawingNumber">
          <el-input v-model="formData.drawingNumber" disabled placeholder="请输入产品图号" />
        </el-form-item>
        <el-form-item label="产品规格" prop="productStandard">
          <el-input v-model="formData.productStandard" disabled placeholder="请输入产品规格" />
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="formData.version" disabled placeholder="请输入版本号" />
        </el-form-item>
      </el-form>
      <!-- 表单 -->
      <el-table border v-loading="formLoading" :data="list">
        <el-table-column label="编号" align="left" prop="code" />
        <el-table-column label="部件编号" align="left" prop="partNumber" min-width="200" />
        <el-table-column label="部件名称" align="left" prop="partName" min-width="200" />
        <el-table-column label="图纸图号" align="left" prop="drawingNumber" min-width="200" />
        <el-table-column label="部件规格" align="left" prop="partSpecification" min-width="200" />
        <el-table-column label="材质" align="left" prop="material" min-width="200" />
        <el-table-column label="单位" align="left" prop="partUnit"  min-width="200px" />
        <el-table-column label="规格" align="left" prop="specification" min-width="200" />
        <el-table-column label="净尺寸(长)" align="left" prop="netSizeLength" min-width="200" />
        <el-table-column label="净尺寸(宽)" align="left" prop="netSizeWidth" min-width="200" />
        <el-table-column label="下料尺寸(长)" align="left" prop="cuttingSizeLength" min-width="200" />
        <el-table-column label="下料尺寸(宽)" align="left" prop="cuttingSizeWidth" min-width="200" />
        <el-table-column label="基本用量" align="left" prop="basicDosage" min-width="200" />
        <el-table-column label="内作" align="left" prop="dictInternalWork" min-width="200" >
          <template #default="scope">
            <Icon icon="ep:check" v-if="scope.row.dictInternalWork === 10" color="#2cc0bc" />
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="外协" align="left" prop="dictOutsourcing" min-width="200" >
          <template #default="scope">
            <Icon icon="ep:check" v-if="scope.row.dictOutsourcing === 10" color="#2cc0bc" />
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="外购" align="left" prop="dictOutsidePurchase" min-width="200" >
          <template #default="scope">
            <Icon icon="ep:check" v-if="scope.row.dictOutsidePurchase === 10" color="#2cc0bc" />
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="工序名称" align="left" prop="dictProcessName" min-width="200" >
          <template #default="scope">
            <dict-tag type="craft_process_name" :value="scope.row.dictProcessName" />
          </template>
        </el-table-column>
        <el-table-column label="下料工序" align="left" prop="dictCuttingProcess" min-width="200" >
          <template #default="scope">
            <dict-tag type="config_manufacturing_details_cutting_process" :value="scope.row.dictCuttingProcess" />
          </template>
        </el-table-column>
        <el-table-column label="下料类型" align="left" prop="dictCuttingType" min-width="200" >
          <template #default="scope">
            <dict-tag type="config_wage_baiting_type" :value="scope.row.dictCuttingType" />
          </template>
        </el-table-column>
        <el-table-column label="是否机加" align="left" prop="dictIsMachining" min-width="200" >
          <template #default="scope">
            <Icon icon="ep:check" v-if="scope.row.dictIsMachining === 10" color="#2cc0bc" />
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column label="机加工序" align="left" prop="dictMachiningProcess" min-width="200" >
          <template #default="scope">
            <dict-tag type="machining_process" :value="scope.row.dictMachiningProcess" />
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="left" prop="userNickName" min-width="200" />
        <el-table-column label="创建时间" align="left" prop="createTime" min-width="200" >
          <template #default="scope">
            <div>
              {{ formatDate(scope.row.createTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="变更人" align="left" prop="updateName" min-width="200" />
        <el-table-column label="变更时间" align="left" prop="updateTime" min-width="200" >
          <template #default="scope">
            <div>
              {{ formatDate(scope.row.updateTime) }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </ContentWrap>
</template>
<script setup lang="ts">
import * as MaterialHistoryApi from '@/api/config/materialHistory'
import * as MaterialCollectApi from '@/api/config/materialCollect'
import { useTagsViewStore } from '@/store/modules/tagsView'
import download from '@/utils/download'
import { formatDate } from '@/utils/formatTime'
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const exportLoading = ref(false) // 导出的加载中
const formData = ref({
  productNumber: undefined,
  productName: undefined,
  drawingNumber: undefined,
  productStandard: undefined,
  version: undefined
})
const formRules = reactive({
  userNickName: [{ required: true, message: '创建者姓名不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const list = ref([])
const contentHeight = ref(0)

/**返回 */
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path: '/config/config/materiel/materielHistory'
  })
}

/** 获取数据 */
const { query } = useRoute() // 路由的查询
const getData = async () => {
  formLoading.value = true
  try {
    list.value = await MaterialHistoryApi.getMaterialHistory((query as any).id)
    formData.value = await MaterialCollectApi.getMaterialInfo((query as any).id)
  } finally {
    formLoading.value = false
  }
}

// 下载
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await MaterialHistoryApi.exportMaterialHistoryDetail({ fileName: '默认名称', id: query.id })
    download.excel(data, '默认名称.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 */
onMounted(async () => {
  contentHeight.value = document.body.clientHeight - 125
  getData()
})

</script>
<style lang="scss" scoped>
.btn {
  margin-bottom: 10px;
}
</style>
